﻿@{
    ViewBag.Title = "Đăng ký học phần";
}
@if(!ViewBag.Error){
<div class="row-fluid">
    <div class="span12">
        <p>
        <span>Chọn chuyên ngành: </span>
        @(Html.Kendo().DropDownList()
            .Name("ID_dt")
            .OptionLabel("Chọn chuyên ngành")
            .DataTextField("Text")
            .DataValueField("Value")
            .HtmlAttributes(new { style = "width:200px;" })
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("getChuyenNganh", "DangKyHocPhan");
                })
                ;
            })
            .Events(e =>
            {
                e.DataBound("chonChuyenNganh");
                e.Change("reloadScheduler");
            })
        )
        &nbsp;&nbsp;
        @String.Format("Học kỳ: {0}_{1}_{2}",ViewBag.HocKyDK.Nam_hoc, ViewBag.HocKyDK.Hoc_ky, ViewBag.HocKyDK.Dot)
        &nbsp;&nbsp; 
        @String.Format("Thời gian đăng ký: Từ {0:dd/MM/yyyy} đến {1:dd/MM/yyyy}", ViewBag.Tu_ngay, ViewBag.Den_ngay);
        </p>
        <p>
        <script>
            var Thu = ["Chủ Nhật", "Thứ Hai", "Thứ Ba", "Thứ Tư", "Thứ Năm", "Thứ Sáu", "Thứ Bảy"]; //Array();
            var Tong_so_tiet = '@ViewBag.Tong_so_tiet';
            var Tiet = Array();
            for (var i = 1; i <= Tong_so_tiet; i++)
                Tiet[i - 1] = "Tiết " + i;
            var idThu = 0;
            var idTiet = 0;
        </script>
        @(Html.Kendo().DropDownList()
            .Name("KieuDK")
            .OptionLabel("Chọn kiểu đăng ký")
            .DataTextField("Text")
            .DataValueField("Value")
            .HtmlAttributes(new { style = "width:200px;" })
            .BindTo(new List<SelectListItem>(){
                new SelectListItem(){
                    Text="Tiến độ học", 
                    Value= @StudentPortal.ViewModels.KieuDangKy.TIENDO.ToString(),
                },
                new SelectListItem(){
                    Text="Học cải thiện", 
                    Value= @StudentPortal.ViewModels.KieuDangKy.CAITHIEN.ToString(),
                },
                new SelectListItem(){
                    Text="Học lại", 
                    Value= @StudentPortal.ViewModels.KieuDangKy.HOCLAI.ToString(),
                },
            })
            .Events(e => {
                e.Change("KieuDK_Change");
            })
        )

        @*@(Html.Kendo().DropDownList()
            .Name("IDMon")
            .OptionLabel("Chọn môn")
            .DataTextField("Text")
            .DataValueField("Value")
            .HtmlAttributes(new { style = "width:300px;" })
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("getMonHoc", "DangKyHocPhan").Data("getFilters");
                })
                .ServerFiltering(true);
            })
            .AutoBind(false)
            .Events(e=> {
                e.Change("reloadGridLopTC");
            })
            .CascadeFrom("KieuDK")
        )*@
          @(Html.Kendo().DropDownList()
            .Name("IDGiaiDoan")
            .DataTextField("Text")
            .OptionLabel("Chọn giai đoạn")
            .DataValueField("Value")
            .HtmlAttributes(new { style = "width:200px;" })
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("getGiaiDoan", "DangKyHocPhan").Data("getFilters");
                });
            })
            .Events(e =>{
                e.Change("reloadScheduler");
            })
            .AutoBind(false)
        )
    </p>
    </div>
</div>
<div class="row-fluid">
        <div class="span5">
            @(Html.Kendo().Grid<StudentPortal.PLAN_MonTinChi_TC>()
                .Name("GridMonDK")
                .Columns(column =>
                {
                    column.Bound(t => t.MARK_MonHoc.Ky_hieu).Width(60);
                    column.Bound(t => t.MARK_MonHoc.Ten_mon);
                })
                .DataSource(source =>
                {
                    source.Ajax().Read(read =>
                    {
                        read.Action("getMonHoc", "DangKyHocPhan", new { Area = "" }).Data("getFilters");
                    }).PageSize(50);
                })
                .Events(e =>
                {
                    e.Change("GridMonDK_change");
                })
                .Scrollable(scroll => scroll.Height(200))
                .Selectable()
            )
        </div>
        <div class="span7">
            @(Html.Kendo().Grid<StudentPortal.ViewModels.LopTinChiViewModel>()
            .Name("GridLopTC")
            .Columns(columns =>
            {
                columns.Bound(lopTC => lopTC.Ten_lop_tc);
                columns.Bound(lopTC => lopTC.Giang_vien).HtmlAttributes(new { style = "width:100px" }).HeaderHtmlAttributes(new { style = "width:100px" });
                columns.Bound(lopTC => lopTC.Ma_mon).HtmlAttributes(new { style = "width:60px" }).HeaderHtmlAttributes(new { style = "width:60px" });
                columns.Bound(lopTC => lopTC.Chi_tiet);
                columns.Bound(lopTC => lopTC.So_sv_max).HtmlAttributes(new { style = "width:50px" }).HeaderHtmlAttributes(new { style = "width:50px" });
                columns.Bound(lopTC => lopTC.Cho_trong).HtmlAttributes(new { style = "width:50px" }).HeaderHtmlAttributes(new { style = "width:50px" });
                columns.Template(@<text></text>).ClientTemplate(@"# 
        var btn = 'Đăng ký';
        var act = 'DangKy';
        if(!Chua_dang_ky){
            btn='Hủy';
            act = 'HuyDangKy';
        };
        #
        #if(Co_lop_TH==false){#  <a ID_lop_tc='#=ID_lop_tc#' data-action='#=act#' class=""k-button-icontext k-button btnDangKy"" href=""\#"">#= btn #</a> #}#<div id='LopTC#=ID_lop_tc#' />")
            .HtmlAttributes(new { style = "width:70px" }).HeaderHtmlAttributes(new { style = "width:70px" });
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Selectable()
            .Pageable(pager => pager.Enabled(false))
            .DataSource(
                dataSource => dataSource.Ajax()
                    .Read(read => read.Action("getLopTC", "DangKyHocPhan").Data("getFilters"))
            )
            .Events(e => {
                e.Change("GridLopTC_change");
            })

        )
        </div>
</div>
<div class="row-fluid">
    <div class="span12">
        <p></p>
        <p style="overflow: hidden"><a href="#modalLopTC" data-toggle="modal" class="btn red pull-right" id="btnChiTietHP">Xem chi tiết học phần</a></p>
        @(Html.Kendo().Scheduler<StudentPortal.ViewModels.ThoiKhoaBieu>()
            .Name("scheduler")
    
            .StartTime(DateTime.Now.Date)
            .EndTime(DateTime.Now.Date.AddHours((int)ViewBag.Tong_so_tiet))
            .DateHeaderTemplate("<strong># if(idThu==7) idThu=0; # #=Thu[idThu]# # idThu++; #</strong>")
            .MajorTimeHeaderTemplate("# if(idTiet==Tong_so_tiet) idTiet=0; # #=Tiet[idTiet]# # idTiet++;# ")
            .EventTemplate(@"
<a class=""btn black icn-only pull-right mini k-scheduler-remove"" data-action='HuyDangKy' ID_lop_tc='#=ID_lop_tc#'><i class=""icon-remove icon-white""></i></a>
<div class=""time_event"" data-color=""#=Color#""><dl><dd>#= title #<dd></dl></div>")
            .Views(views =>
            {
                views.WeekView(); 
            })
    
            .Editable(false)
            .Events(e => {
                e.DataBound("onDataBound");
                
            })
            .DataSource(d => d
                .Model(m =>
                {
                    m.Id(f => f.Id);
                    m.Field(f => f.ID_lop_tc).DefaultValue(1);
                })
                .Read(read=>read.Action("getThoiKhoaBieu", "DangKyHocPhan").Data("getFilters"))
            )
    
        )
        <p></p>
    </div>
</div>
<div id="modalLopTC" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
		<h3 id="myModalLabel1">Chi tiết học phần đăng ký</h3>
	</div>
	<div class="modal-body">
		@(Html.Kendo().Grid<StudentPortal.ViewModels.LopTinChiViewModel>()
            .Name("GridChiTietHocPhan")
            .Columns(column =>
            {
                column.Bound(t => t.Ten_lop_tc);
                column.Bound(t => t.So_tin_chi).Width(50);
                column.Bound(t => t.Hoc_phi).Width(80);
                //column.Bound(t => t.Chi_tiet);
                //column.Bound(t => t.Ten_lop_tc);
            })
            .DataSource(source => {
                source.Ajax().Read(read => {
                    read.Action("getChiTietHocPhan", "DangKyHocPhan", new { Area = ""}).Data("getFilters");
                }).PageSize(50);
            })
            .Filterable()
            .Sortable()
        )
    </div>
	<div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Đóng</button>
	</div>
</div>
<style>
    .loptc-selected {
        box-shadow: none;
        background-image: none;
        background-color: orange;
        border-color: orange;
        color: #FFFFFF;
    }
    .k-scheduler-remove {
        padding: 3px;
    }
    .k-event>a.k-scheduler-remove {
        display:none;
    }
    .k-event:hover>a.k-scheduler-remove {
        display:block;
    }
</style>
<script>
    var selectedIDMon;
    $('.k-event>a.k-scheduler-remove').live('click', function () {
        if (!confirm("Hủy đăng ký?")) return;
        $.ajax({
            url: '/DangKyHocPhan/' + $(this).attr('data-action'),
            data: {
                ID_lop_tc: $(this).attr('ID_lop_tc'),
                ID_dt: $('#ID_dt').val()
            },
            dataType: 'json',
            type: 'post',
            success: function (e) {
                $("#IDGiaiDoan").data("kendoDropDownList").dataSource.read();
                $("#IDGiaiDoan").val(0);
                reloadGridLopTC(e);
                reloadScheduler();
                alert(e.Message);
            }
        });
    });
    
    function KieuDK_Change() {
        $("#GridMonDK").data("kendoGrid").dataSource.read();
    }
    function GridMonDK_change() {
        var selected = $.map(this.select(), function (item) {
            return $(item);
        });
        var item = this.dataItem(selected[0]);
        selectedIDMon = item.ID_mon_tc;
        $('#GridLopTC').data('kendoGrid').dataSource.read();
    }

    function GridLopTC_change() {
        var selected = $.map(this.select(), function (item) {
            return $(item);
        });
        var item = this.dataItem(selected[0]);
        $('.loptc-selected').removeClass('loptc-selected');
        $('#LopTC' + item.ID_lop_lt).parent().parent().attr('class', 'loptc-selected');
    }
    function chonChuyenNganh() {
        $("#ID_dt").data("kendoDropDownList").value(1);
        $("#scheduler").data("kendoScheduler").dataSource.read();
    }
    function onDataBound(e) {
        $('.time_event').each(function () {
            $(this).parent().css('background-color', $(this).attr('data-color'));
        })
    }
    function reloadScheduler(e) {
        $("#scheduler").data("kendoScheduler").dataSource.read();
    }
    
    function getFilters() {
        return {
            ID_dt: $('#ID_dt').val(),
            KieuDK: $('#KieuDK').val(),
            ID_mon_tc: selectedIDMon,//$('#IDMon').val(),
            ID_giai_doan: $('#IDGiaiDoan').val()
        }
    }
    function deleteNotUseElements() {
        $('.k-reset.k-header.k-toolbar.k-scheduler-navigation').css("display", "none");
        $('.k-scheduler-table.k-scheduler-header-all-day').css("display", "none");
        $('.k-scheduler-times-all-day').parent().css("display", "none");
        $('.k-floatwrap.k-header.k-scheduler-toolbar.k-secondary').css('display', 'none');
    }
    function reloadGridLopTC(e) {
        $("#GridLopTC").data("kendoGrid").dataSource.read();
    }
    $(document).ready(function () {
        reloadScheduler()
        deleteNotUseElements();

        $('.btnDangKy').live('click', function (e) {
            e.preventDefault();
            $.ajax({
                url: '/DangKyHocPhan/'+$(this).attr('data-action'),
                data: {
                    ID_lop_tc: $(this).attr('ID_lop_tc'),
                    ID_dt: $('#ID_dt').val()
                },
                dataType: 'json',
                type: 'post',
                success: function (e) {
                    $("#IDGiaiDoan").data("kendoDropDownList").dataSource.read();
                    $("#IDGiaiDoan").val(0);
                    reloadGridLopTC(e);
                    reloadScheduler();
                    alert(e.Message);

                }
            });
        });
        $('#btnChiTietHP').click(function () {
            $('#GridChiTietHocPhan').data('kendoGrid').dataSource.read();
        });
    });

</script>
}else{

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="alert alert-error">
                @ViewBag.ErrorMessage
            </div>
        </div>
    </div>
</div>


}